<template>
	<view class="mark" :class="[show_key ? '' : 'hidden']">
		<view class="kong"></view>
		<!-- 信息框 -->
		<view class="msg">
			<!-- 关闭按钮 -->
			<u-icon name="close" class="closePay" @tap="closeFuc"></u-icon>
			<view class="title">
				请设置支付密码
			</view>
			<view class="subTitle" v-show="show_subTitle">
				付款金额{{price}}
			</view>
			<!-- 密码框 -->
			<view class="pswBox">
				<!-- password[item] ? '●' : '' -->
				<view v-for="item in 6" :key="item" class="content_item">{{password[item-1]}}</view>
			</view>
		</view>
		<!-- 数字键盘 -->
		<!-- <mini-amountInput confirmText="确认" @valChange="valChange"></mini-amountInput> -->
		<u-keyboard mode="number" :show="show_key" :overlay="false" :tooltip="false" :dotDisabled="false"
			@change="valChange" @backspace="backspace">
		</u-keyboard>
	</view>
</template>

<script>
	import {
		openWallet
	} from '@/config/walletApi.js';
	export default {
		props: {
			show_key: Boolean,
			price: String,
			show_subTitle: {
				default: false
			},
			mix: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				password: '',
				customerNo: '',
				tenantId: ''
			}
		},
		created() {
			this.customerNo = uni.getStorageSync('customerNo')
			this.tenantId = getApp().globalData.tenantId
		},
		watch: {
			'password': {
				handler() {
					console.log('正在监听')
					if (this.password.length === 6) {
						openWallet({
							tenantId: this.tenantId,
							customerNo: this.customerNo,
							txPassword: this.password
						}).then((res) => {
							if (res) {
								// 存储是否开通钱包
								uni.setStorageSync('isOpenedAccount', 1);
								// 跳转
								uni.showToast({
									icon: 'success',
									position: 'bottom',
									title: '开通成功'
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/userCenter/userCenter'
									});
								}, 2000)
							}
						})
					}
				}
			}
		},
		methods: {
			// 关闭支付页面
			closeFuc() {
				console.log('关闭支付页面');
				// 触发全局的自定义事件，附加参数都会传给监听器回调函数。
				this.$emit("closeFuc")
			},
			// 键盘被点击
			valChange(val) {
				this.password += val
			},
			// 键盘删除键被点击
			backspace() {
				console.log(11)
			}
		}
	}
</script>

<style>
	.mark {
		width: 750upx;
		background: rgba(0, 0, 0, 0.7);
		padding: 0 0 700upx 0;
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 99;
	}

	.hidden {
		display: none;
	}

	.kong {
		width: 750upx;
		height: 250upx;
	}

	.msg {
		width: 550upx;
		height: 450upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		margin: 0 auto;
		animation: msgBox .2s linear;
	}

	@keyframes msgBox {
		0% {
			transform: translateY(50%);
			opacity: 0;
		}

		50% {
			transform: translateY(25%);
			opacity: 0.5;
		}

		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	@keyframes numBox {
		0% {
			transform: translateY(50%);
			opacity: 0;
		}

		50% {
			transform: translateY(25%);
			opacity: 0.5;
		}

		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	.closePay {
		padding: 40rpx 0 0 40rpx;
	}

	.msg>.title {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-weight: 500;
		font-size: 36upx;
		text-align: center;
	}

	.msg>.subTitle {
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		font-weight: 400;
		font-size: 32upx;
		text-align: center;
	}

	.pswBox {
		width: 80%;
		height: 80upx;
		margin: 50upx auto 0;
		display: flex;
	}

	.content_item {
		flex: 2;
		text-align: center;
		line-height: 80upx;
		border: 1upx solid #D6D6D6;
		border-right: 0upx solid;
	}

	.content_item:nth-child(1) {
		border-radius: 10upx 0 0 10upx;
	}

	.content_item:nth-child(6) {
		border-right: 1upx solid #D6D6D6;
		border-radius: 0 10upx 10upx 0;
	}

	/* 	.loading{
		position: relative;
		z-index: 4444;
	} */
</style>
